import { Col, Descriptions, Image, Row, Tabs, Tag } from "antd"

export const ProductPackageDetails=(props)=>{
  const selectedPackage =props.data;
   const statusMap = {
  '在售': <Tag color="success">在售</Tag>,
  '预售': <Tag color="processing">预售</Tag>,
  '下架': <Tag color="default">下架</Tag>
};
// 启用状态标签样式映射
const enableStatusMap = {
  '启用': <Tag color="success">启用</Tag>,
  '禁用': <Tag color="error">禁用</Tag>
};

    return <>
     <div className="modal-box">
            <Row gutter={16} style={{ marginBottom: 24 }}>
              <Col xs={24} md={8}>
                <Image 
                  src={selectedPackage.cover} 
                  alt={selectedPackage.name} 
                  width="100%" 
                  preview={false}
                  style={{ borderRadius: 8 }}
                />
              </Col>
              <Col xs={24} md={16}>
                <Descriptions column={1} bordered>
                  <Descriptions.Item label="套餐ID">{selectedPackage.id}</Descriptions.Item>
                  <Descriptions.Item label="套餐名称">{selectedPackage.name}</Descriptions.Item>
                  <Descriptions.Item label="价格">
                    <span style={{ color: '#f50', fontWeight: 'bold' }}>¥{selectedPackage.price.toFixed(2)}</span>
                    <span style={{ marginLeft: 8, textDecoration: 'line-through', color: '#888' }}>¥{selectedPackage.originalPrice.toFixed(2)}</span>
                  </Descriptions.Item>
                  <Descriptions.Item label="状态">{statusMap[selectedPackage.status]}</Descriptions.Item>
                  <Descriptions.Item label="启用状态">{enableStatusMap[selectedPackage.enableStatus]}</Descriptions.Item>
                  <Descriptions.Item label="有效期">{selectedPackage.validPeriod}</Descriptions.Item>
                  <Descriptions.Item label="包含项目">{selectedPackage.items}个理疗项目</Descriptions.Item>
                </Descriptions>
              </Col>
            </Row>
            
            <Tabs defaultActiveKey="description">
              <Tabs.TabPane tab="套餐说明" key="description">
                <div style={{ lineHeight: 1.8 }}>
                  <h4 style={{ marginBottom: 8 }}>套餐介绍：</h4>
                  <p style={{ marginBottom: 16 }}>{selectedPackage.details.description}</p>
                  
                  <h4 style={{ marginBottom: 8 }}>包含项目：</h4>
                  <ul style={{ marginBottom: 16, paddingLeft: 20 }}>
                    {selectedPackage.details.includes.map((item, index) => (
                      <li key={index} style={{ marginBottom: 4 }}>{item}</li>
                    ))}
                  </ul>
                </div>
              </Tabs.TabPane>
              <Tabs.TabPane tab="使用说明" key="instructions">
                <div style={{ lineHeight: 1.8 }}>
                  <h4 style={{ marginBottom: 8 }}>注意事项：</h4>
                  <pre style={{ 
                    whiteSpace: 'pre-wrap', 
                    marginBottom: 16, 
                    padding: 12, 
                    backgroundColor: '#f5f5f5', 
                    borderRadius: 4 
                  }}>
                    {selectedPackage.details.precautions}
                  </pre>
                  
                  <h4 style={{ marginBottom: 8 }}>有效期说明：</h4>
                  <p style={{ marginBottom: 16 }}>{selectedPackage.details.validity}</p>
                  
                  <h4 style={{ marginBottom: 8 }}>其他说明：</h4>
                  <p>{selectedPackage.details.remarks}</p>
                </div>
              </Tabs.TabPane>
            </Tabs>
          </div>
    </>
}